<template>
	<div class="body Abnormal">
		<header>
			<i class="iconfont icon-xiangzuo1" @click="goPrev"></i><span>工单完结</span
			><i class="iconfont icon-shanguangdeng" @click="flashOpenOrClose"></i
			><i class="iconfont closeScan" @click="closeScan">关闭</i>
		</header>
		<div class="common-box">
		<div class="content-box">
			<v-scan
			@scanData="scanData"
			ref="ch"
			:switchScan="switchScan"
			:loadingData="loadingData"
			></v-scan>
		</div>
		</div>
		<div class="form-content">
			<div class="form-item">
				<label>母单号 <span style="color:red">*</span></label>
				<el-input class="form-input" type="text" v-model="OMS.omsNo" :disabled="true"></el-input>
			</div>
			<div class="form-item">
				<label>子单号 <span style="color:red">*</span></label>
				<el-input class="form-input" type="text" v-model="OMS.labelNo" :disabled="true"></el-input>
			</div>
			<div class="form-item">
				<label>项目 <span style="color:red">*</span></label><br>
				<el-select v-model="project" placeholder="选择项目" @change="changeProject">
					<el-option v-for="item in projectList" :key="item.k" :label="item.v" :value="item.k">
					</el-option>
				</el-select>
			</div>
			<!-- <div class="form-item">
				<label>处理人<span> </span></label><br>
				<el-select v-model="downPerson" placeholder="选择处理人" @change="changeDownPerson">
					<el-option v-for="item in userList" :key="item.staff" :label="item.staffName" :value="item">
					</el-option>
				</el-select>
			</div> -->
			<!-- <div class="form-item">
				<label>异常环节 <span style="color:red">*</span></label><br>
				<el-select v-model="aboLink" placeholder="异常环节选择">
					<el-option v-for="item in linkOptions" :key="item" :label="item" :value="item">
					</el-option>
				</el-select>
			</div> -->
			<div class="form-item">
				<label>异常原因 <span style="color:red">*</span></label><br>
				<el-select v-model="aboReason" placeholder="异常原因选择">
					<el-option v-for="item in reasonOptions" :key="item" :label="item" :value="item">
					</el-option>
				</el-select>
			</div>
			<div class="form-item">
				<label>异常描述</label>
				<el-input
				type="textarea"
				:rows="2"
				placeholder="请输入内容"
				v-model="aboText">
				</el-input>
			</div>
			<div class="form-item">
				<label>处理结果<span style="color:red">*</span></label>
				<el-input class="form-input" type="text" v-model="downResult"></el-input>
			</div>
			<div class="form-item">
				<label>寄回单号<span style="color:red">*</span></label>
				<el-input class="form-input" type="text" v-model="returnTrackingNumber"></el-input>
			</div>
			<div class="form-item">
				<label>寄回公司<span style="color:red">*</span></label>
				<el-input class="form-input" type="text" v-model="returnTrackingCompany"></el-input>
			</div>
		</div>
		<div class="uploadImg">
		<v-uploader title=""
			url="/system/app/abnormalUploadImage"
			@onErr ="onErr"
			@onSuccess ="onSuccess"
			:limit="1"
			ref="uploadAb"
			name="file"
			:params="uploadParams"/>
		</div>
		<div class="footer-commit">
			<div class="commit" @click="commitAbo">提交</div>
		</div>
    	<pictureSample v-show='sampleShow' linkNode='yc'></pictureSample>
	</div>
</template>
<script>
  import Scan from '@/components/ContinuousScan';
  import pictureSample from '@/components/pictureSample'
  import Header from '@/components/header'
  import Uploader from '@/components/uploaderFile'
	import * as fetchObj from '@/api/index/reportAbnormal'
	import $ from "jquery"
	import { iatRecorder } from '@/utils/iatRecorder'
	import Vue from 'vue';
	import { Toast, Dialog } from 'vant';
	Vue.use(Toast).use(Dialog);
	export default {
		name: 'ReportAbnormal',
		components: {
			'v-scan': Scan,
      'v-header': Header,
      'v-uploader': Uploader, // 上传组件
      'pictureSample': pictureSample
		},
		data() {
			return {
				orderFell: '',
				code: '',
				loadingData: false,
				fetchObj,
				headerName: '上报异常',
				responseData: {},
				OMS: {},
				aboType: '', // 异常类型
				typeOptions: [], // 异常类型下拉
				aboReason: '',
				project: '',
				downPerson: '',
				downResult: '',
				downNo: '', //  处理人工号
				returnTrackingCompany: '',
				returnTrackingNumber: '',
				reasonOptions: [],
				recipientContactList: ['寄方', '收方'], // 改派收件联系人选择列表
				reassignRecipientContact: '', // 改派收件联系人
				reassignmentAppointmentTime: this.timestampFormat(new Date().getTime(), 'YYYY-MM-DD'), // 改派预约日期
				appointmentPeriod: '', // 改派预约时间段
				appointmentPeriodList: [], // 改派预约时间段数组
				pickerOptions1: {
				disabledDate(time) {
					return time.getTime() < Date.now() - 8.64e7
				}
				},
				localtttOptions: [],
				aboLink: '',
				linkOptions: [],
				aboPer: '',
				perOptions: [],
				aboText: '', // 异常描述
				allData: {}, // 所有异常数据
				uploadParams: {}, // 图片上传附带参数
				switchScan: true,
				CurrentCity: '', // 当前城市
				CurrentLocation: '', // 当前地址
				CurrentDistrict: '', // 当前区县
				longitude: '',
				latitude: '',
				labelList: [], // 标签号列表
				selectedLabelList: [], // 已选择的标签号列表
				labelInput: '', // 手动输入的标签
				iatRecorder3: null,
				mySecond: 0,
				startPerform: false,
        		sampleShow: false, // 图片示例是否展示
				sfNetworkNum: '', //  网点人员工号 401107
				projectType: 0, // 订单类型
				sfNetCode: '', // 网点代码
        		businessType: '', // 产品名称
				projectList: [], // 项目列表
				userList: [], // 处理人列表 
			}
		},
		watch: {
			aboType(val, oval) {
				let that = this;
				if (val != oval) {
					that.aboReason = '';
					for (let ty = 0; ty < that.allData.newAbnormalType.length; ty++) {
						if (that.allData.newAbnormalType[ty].abnormalType == val) {
							that.reasonOptions = that.allData.newAbnormalType[ty].abnormalReason;
						}
					}
				}
			}
		},
		mounted() {
			this.getAboList();
			// try {
			// 	CallAndroidOrIOS.ContinuousScan();
			// } catch (error) {}
	// 		//初始化语音
	// 		//这里用一个iatRecorder3接是为了保持当前vue既用到了语音 又可以有自己的私有方法
	// 		this.iatRecorder3= iatRecorder;
	// 		// 接收语音转文字结果
	// 		this.myData(this.iatRecorder3);
			// 异常环节   abnormalLinkMap  '派送'
			// 异常类型   newAbnormalType:abnormalType  '客户类'
			// 异常原因   newAbnormalType:abnormalReason  '寄方客户要求退回'  '客户要求转寄其它地址'
		},
		// beforeDestroy() {
		// 	this.iatRecorder3.destroyFn()
		// },
		created() {
			CallAndroidOrIOS.getImageChooserType('all');
		},
		methods: {
			ScanSFNumber(inputName) {
				window.QRScanAjax = this.QRScanSFNumber;
				window.TellVue_QRScanResult_Ajax = this.QRScanSFNumber;
				this.$store.state.ScanQRCodeInputName = inputName;
				if (!(this.getItem('SXJF_ifScan') && this.getItem('SXJF_ifScan') == '是')) {
					// 安卓
					try {
						CallAndroidOrIOS.VueSCAN();
					}
					catch(error) {}
				}
				// 苹果
				try {
					window.webkit.messageHandlers.messageSend.postMessage({
						a: '调用app原生扫描二维码/条码',
						b: inputName
					})
				} catch (error) {}
			},
			QRScanSFNumber(qrcode) {
				let that = this;
				let inputName = this.$store.state.ScanQRCodeInputName;
				this[inputName] = qrcode;
			},
			// 接收iOS/android值
			QRScanAjax(qrcode) {
				let that = this;
				let inputName = this.$store.state.ScanQRCodeInputName;
				this[inputName] = qrcode;
				this.confirmLabelInput();
			},
			SetCurrAddress(lngad) {
				this.ReceivingLatitud(lngad);
			},
			// 上传图片完成后（包括部分上传失败）
			finishUpload(text) {
				let that = this;
				that.$emit('isLoading', false);
				let textvalue = '';
				if (text) {
					textvalue = text ? "," + text : '';
				}
				this.$alert('异常上报成功' + textvalue, '提示', {
					confirmButtonText: '确定',
					callback() {
						that.$router.back(-1);
					}
				})
			},
			/**
			 * 提交异常
			 */
			commitAbo() {
				let that = this;
				if (!this.OMS.omsNo && !this.OMS.labelNo) {
					this.$alert('请输入单号', '提示', {
						confirmButtonText: '确定',
					})
					return;
				}
				// if (!this.aboLink) {
				// 	this.$alert('请选择异常环节', '提示', {
				// 		confirmButtonText: '确定',
				// 	})
				// 	return
				// }
				if (!this.project) {
					this.$alert('请选择项目', '提示', {
						confirmButtonText: '确定',
					})
					return
				}
				if (!this.aboReason) {
					this.$alert('请选择异常原因', '提示', {
						confirmButtonText: '确定',
					})
					return
				}
				if (!this.returnTrackingCompany) {
					this.$alert('请选输入寄回公司', '提示', {
						confirmButtonText: '确定',
					})
					return
				}
				if (!this.returnTrackingNumber) {
					this.$alert('请输入寄回单号', '提示', {
						confirmButtonText: '确定',
					})
					return
				}
				let params = {
					fileType: '异常',
					omsNo: this.OMS.omsNo,
					deliveryNoSF: this.OMS.labelNo,
					transporterId: this.$store.state.userInfo.orgnizationId,
					transporterName: this.$store.state.userInfo.orgnizationName,
					sponsorName: this.$store.state.userInfo.userName,
					cellphone: that.$store.state.userInfo.cellphone, // 司机电话
					abnormalReason: this.aboReason,
					abnormalLink: this.aboLink,
					responsibleParty: this.aboPer,
					labelNo: this.OMS.labelNo,
					labelNoArr: this.selectedLabelList,
					courierEmpCode: this.sfNetworkNum,
					netCode: this.sfNetCode,
					projectType: this.projectType,
					aboText: this.aboText,
					downPerson: this.downPerson,
					downNo: this.downNo,
					project: this.project,
					returnTrackingCompany: this.returnTrackingCompany,
					returnTrackingNumber: this.returnTrackingNumber,
          			extendAttach3: this.reassignmentAppointmentTime + ' ' + this.appointmentPeriod, // 改派日期 时间段
					status: 'YWC',
					downResult: this.downResult
				}
				this.uploadParams = {...this.uploadParams, ...params}
				this.$refs.uploadAb.submit(this, this.uploadParams);	
			},
			onSuccess() {
				this.OMS.omsNo = ''
				this.OMS.labelNo = ''
				this.aboText = ''
				this.project = ''
				this.downNo = ''
				this.aboLink = ''
				this.aboReason = ''
				this.downPerson = ''
				this.returnTrackingCompany = ''
				this.returnTrackingNumber = ''
				this.downResult = ''
			},
			onErr() {
			},
			// 选择标签
			selectLabel(index) {
				let that = this;
				that.labelList[index].ifSelect = !that.labelList[index].ifSelect;
				let iconElement = $('.SingleLatitudeBox_box>div').eq(index).children('span.iconfont');
				if (iconElement.hasClass('icon-xuanzhong')) {
				that.selectedLabelList = that.selectedLabelList.filter(item => {
					return item !== that.labelList[index].productNo
				})
				iconElement.removeClass('icon-xuanzhong').addClass('icon-weixuanzhong');
				} else if (iconElement.hasClass('icon-weixuanzhong')) {
				that.selectedLabelList.push(that.labelList[index].productNo);
				iconElement.removeClass('icon-weixuanzhong').addClass('icon-xuanzhong');
				}
			},
			sampleAppear() {
				this.sampleShow = true;
			},
			// 删除已选中运单
			deleteLabel(idx) {
				let that = this;
				for (let t = 0; t < that.labelList.length; t++) {
				if (that.labelList[t].productNo == that.selectedLabelList[idx]) {
					that.labelList[t].ifSelect = false;
					that.selectedLabelList.splice(idx, 1);
					$('.SingleLatitudeBox_box>div').eq(t).children('span.iconfont').removeClass('icon-xuanzhong').addClass(
						'icon-weixuanzhong')
					break;
				}
				}
			},
			// 确定扫描 或 手动输入的标签
			confirmLabelInput() {
				let that = this;
				that.labelList.forEach(function (item, idx) {
				if (that.labelInput == item.productNo) {
					item.ifSelect = true;
					$('.SingleLatitudeBox_box>div').eq(idx).children('span.iconfont').removeClass(
						'icon-weixuanzhong').addClass('icon-xuanzhong');
					that.selectedLabelList = that.selectedLabelList.filter(items => {
					return items !== item.productNo
					})
					that.selectedLabelList.push(item.productNo);
				}
				})
			},
			// 全选
			checkAllLabel() {
				let that = this;
				that.selectedLabelList = [];
				for (let p = 0; p < that.labelList.length; p++) {
				that.labelList[p].ifSelect = true;
				that.selectedLabelList[p] = that.labelList[p].productNo;
				$('.SingleLatitudeBox_box>div').eq(p).children('span.iconfont').removeClass('icon-weixuanzhong').addClass(
						'icon-xuanzhong')
				}
			},
			// 请求下拉框数据
			getAboList() {
				let that = this;
				this.httpRequest1('post', '/system/app/abnormalSeleteData', {}).then(res => {
				that.typeOptions = res.data.abnormalType// 异常类型
				that.reasonOptions = res.data.abnormalReason // 异常原因
				that.linkOptions = res.data.abnormalLink // 异常环节
				that.perOptions = res.data.responsibleParty// 责任方
				})
				this.httpRequest1('post', '/system/app/queryDataDictionary', {"keyName":"工单维护-项目"}).then(res => {
					that.projectList = res.data
				})
			},
			// 切换项目名称
			changeProject (val) {
				let that = this
				this.httpRequest1('post', '/system/app/queryUserList', {"project": val, "userName":""}).then(res => {
					that.userList = res.data
				})
			},
			// 切换处理人
			changeDownPerson (item) {
				this.downPerson = item.staffName,
				this.downNo = item.staff
			},
		// 扫描后
			scanData(data) {
				if (data.length < 11) {
					this.$alert('单号不能小于11位数,请重新扫描', '提示', {
					confirmButtonText: '确定'
					})
					return
				}
				this.OMS.omsNo = data
				let that = this;
				let postData = {
					omsNo: data // 单号
				};
				// queryOrderByOmsNoSupportNot
				this.httpRequest1('post', '/system/app/queryOrderByOmsNoYwcAbnormal', postData).then(res => {
				if(res.success) {
					if (res.data) {
						this.OMS.omsNo = res.data.parentOmsNo
						this.OMS.labelNo = res.data.code
						this.deliveryNoSF = res.data.parentOmsNo
						this.transporterId = res.data.orgnizationId
						this.transporterName = res.data.orgnizationName
						this.sponsorName = res.data.userName
						this.aboReason = res.data.abnormalReason
						this.aboLink = res.data.abnormalLink
						this.responsibleParty = res.data.responsibleParty
						this.downPerson = res.data.downPerson
						this.downNo = res.data.downNo
						this.project = res.data.project
						this.aboText = res.data.abnormalExplain
					}
				} else {
					that.$alert('暂无订单信息!', '提示', {
					confirmButtonText: '确定',
					})
				}
				})
			},
			// 关闭扫描框
			closeScan() {
			// 安卓
			try {
				CallAndroidOrIOS.CancelScan();
			} catch (error) {}
			// 苹果
			try {
				window.webkit.messageHandlers.messageSend.postMessage({
				a: "离开app原生半屏扫描二维码/条码",
				});
			} catch (error) {}
			},
			//打开或关闭 闪光灯
			flashOpenOrClose() {
			let that = this;
			// 安卓
			try {
				if (that.ifflash) {
				CallAndroidOrIOS.setTorchEnabled_false(); // setTorchEnabled_false  闪光灯 关闭
				that.ifflash = false;
				} else {
				CallAndroidOrIOS.setTorchEnabled_true(); // setTorchEnabled_true  闪光灯 打开
				that.ifflash = true;
				}
			} catch (error) {}
			// 苹果
			try {
				window.webkit.messageHandlers.messageSend.postMessage({
				a: '打开或关闭闪光灯',
				});
			} catch (error) {}
			},
			// 关闭扫码框
			CloseScanBox() {
			// 安卓
			try {
				CallAndroidOrIOS.CancelScan();
			} catch (error) {}
			// 苹果
			try {
				window.webkit.messageHandlers.messageSend.postMessage({
				a: '离开app原生半屏扫描二维码/条码',
				});
			} catch (error) {}
			},
			goPrev() {
				this.closeScan()
				this.$router.go(-1);
			},
			switchScanFun(data) {
				if (data) {
				this.switchScan = true // 打开摄像头
				} else {
				this.switchScan = false // 关闭摄像头
				}
			},
			uploadOnChange(file) {
				this.switchScanFun(true); // 打开摄像头
			}
    	},
  		beforeDestroy () {
			this.closeScan()
  		}
  }
</script>
<style scoped lang="less">
	@import "../../components/publicLess.less";
	.common-box {
		height: 100%;
	}
	.Abnormal {
		font-size: 28/50rem;
	}
	.form-content {
		padding: 5/50rem 40/50rem;
		padding-bottom: 0;
		background-color: #fff;
		position: relative;
	}
	.form-item {
		line-height: 55/50rem;
		margin: 26/50rem 0;
		.icon-yuyin{
			margin-left: 20/50rem;
			color: @PublicColor;
		}
		.form-prompt{
			color: #999;
			font-size: 27/50rem;
		}
		.form-end{
			float: right;
		}
		&>div {
			margin-top: 5/50rem;
		}
	}
	.content-input {
		display: flex;
		.form-input-1 {
			width: 600/50rem;
		}
		.button-add {
			width: 76/50rem;
			height: 76/50rem;
			font-size: 28/50rem;
			line-height: 80/50rem;
			margin: 0 10/50rem;
			text-align: center;
			background-color: @PublicColor;
			border-radius: 50%;
			color: #fff;
			cursor: pointer;
		}
	}
	.form-item label {
		display: inline-block;
		font-size: 30/50rem;
		color: #6f7180;
	}
	.form-item .sf-network-num{
		display: flex;
		line-height: 70/50rem;
		input{
			flex-grow: 1;
		}
		i{
			font-size: 50/50rem;
			color: @PublicColor;
			margin: 0 20/50rem;
		}
		span{
			height: 60/50rem;
			margin-top: 5/50rem;
			line-height: 60/50rem;
			width: 180/50rem;
			font-size: 28/50rem;
			background-color: @PublicColor;
			text-align: center;
			color: #fff;
			border-radius: 8/50rem;

		}
	}
	.footer-commit {
		font-size: 28/50rem;
		text-align: center;
		display: flex;
		width: 100%;
		color: #fff;
	}
	.footer-commit .commit {
		flex: 1;
		line-height: 70/50rem;
		margin: 0 30/50rem 30/50rem;
		background-color: @PublicColor;
		text-align: center;
		border-radius: 35/50rem;
	}
	.uploadImg {
		padding: 0 30/50rem 30/50rem;
		box-sizing: border-box;
		div {
			float: none;
		}
		&>div:nth-child(1) {
			margin-bottom: 15/50rem;
		}
		span {
			float: none;
			// color: #aaa;
		}
		.myUpload{
		padding-bottom: 0;
		}
	}
	.kong {
		width: 100%;
		height: 70/50rem;
	}
</style>